<template>
  <div class="box">
    <!-- <h2>我的</h2> -->
    <div class="head">
      <van-icon name="user-circle-o" /><a @click="login">京东用户</a>
    </div>
    <div class="user">
      <div class="user-dist">
        <span>商品收藏</span><span>店铺收藏</span><span>我的足迹</span>
      </div>
      <div class="user-dist-icon">
        <van-grid :column-num="4" :border="false">
          <van-grid-item
            v-for="value in icon01"
            :key="value.id"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
      </div>
    </div>
    <div class="user2">
      <div class="user-dist-icon">
        <van-grid :column-num="5" :border="false">
          <van-grid-item
            v-for="value in icon02"
            :key="value.id"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
      </div>
    </div>
    <div class="user3">
      <div class="user-dist-icon">
        <van-grid :column-num="4" :border="false">
          <van-grid-item
            v-for="value in icon03"
            :key="value.id"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
      </div>
    </div>
    <div class="logo"><img src="@/assets/img/mine/logo.png" alt="" /></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon01: [
        { id: 1, icon: "credit-pay", text: "待付款" },
        { id: 2, icon: "send-gift-o", text: "待收货" },
        { id: 3, icon: "after-sale", text: "退换/售后" },
        { id: 4, icon: "records", text: "全部订单" },
      ],
      icon02: [
        { id: 1, icon: "discount", text: "优惠券" },
        { id: 2, icon: "balance-list-o", text: "白条额度" },
        { id: 3, icon: "smile-o", text: "京豆" },
        { id: 4, icon: "bill-o", text: "红包" },
        { id: 5, icon: "paid", text: "全部资产" },
      ],
      icon03: [
        { id: 1, icon: "smile-comment-o", text: "客服服务" },
        { id: 2, icon: "todo-list-o", text: "我的预约" },
        { id: 3, icon: "balance-pay", text: "闲置换钱" },
        { id: 4, icon: "replay", text: "高价回收" },
      ],
    };
  },
  methods: {
    login() {
      this.$router.push({ name: "login" });
    },
  },
};
</script>

<style scoped>
.box {
  padding: 46px 30px;
  background-image: linear-gradient(
    60deg,
    rgba(243, 146, 142, 0.151),
    rgba(235, 50, 136, 0.151)
  );
}
.box .head {
  font-size: 23px;
  letter-spacing: 3px;
  color: #333;
}
.box .head .van-icon-user-circle-o {
  font-size: 60px;
  color: red;
  vertical-align: middle;
}
.user,
.user2,
.user3 {
  /* border: 1px solid red; */
  /* padding: 55px; */
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid rgb(214, 214, 214);
  overflow: hidden;
}
.logo {
  padding: 55px;
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid rgb(214, 214, 214);
  overflow: hidden;
  background-color: #fff;
  text-align: center;
}
.user .user-dist {
  height: 30px;
  display: flex;
  justify-content: space-around;
  background-color: rgba(236, 236, 236, 0.651);
  align-items: center;
}
.user .user-dist-icon .van-grid-item ::v-deep i.van-icon.van-grid-item__icon,
.user2 .user-dist-icon .van-grid-item ::v-deep i.van-icon.van-grid-item__icon,
.user3 .user-dist-icon .van-grid-item ::v-deep i.van-icon.van-grid-item__icon {
  font-size: 32px;
}
.user
  .user-dist-icon
  .van-grid
  .van-grid-item:nth-of-type(4)
  ::v-deep
  i.van-icon.van-grid-item__icon {
  color: red;
}
.user2
  .user-dist-icon
  .van-grid
  .van-grid-item:nth-of-type(5)
  ::v-deep
  i.van-icon.van-grid-item__icon {
  color: red;
}
</style>